<template>
   <div class="user-table p10 mt10 bg-white">
        <el-form :inline="true"  class="demo-form-inline" size="mini">
             <el-form-item label="价值数据">
                {{times}}
                </el-form-item>
                 <el-form-item label="">
                <el-button-group >
                    <el-button 
                    v-for="item of typeMenu" 
                    :key="item.type" 
                    :type="item.isActive?'primary':'default'"
                    @click="clickChangeType(item)"
                    >{{item.name}}</el-button>
                   
                    </el-button-group>
                </el-form-item>

                   <el-form-item label="">
                 <el-date-picker
                    v-model="opeationTime"
                    type="daterange"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    :picker-options="pickerOptions1"
                    end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>

                <el-form-item label="">
                 <el-button type="primary" @click="priceSearch">咨询</el-button>
                </el-form-item>
        </el-form>
          <el-row :gutter="20" class="mt20">
            <el-col :span="12" >
                <div class="price">
                    <dl>
                      <dt>{{current.activeUserCount}}</dt>
                      <dd>活跃</dd>
                    </dl>
                     <dl>
                      <dt><el-progress type="circle" :percentage="percentage" :width="45"></el-progress></dt>
                      <dd class="mt0">活跃率</dd>
                    </dl>
                     <dl>
                     <dt>{{current.freeCourseUserRate}}</dt>
                      <dd>人均免费课程</dd>
                    </dl>
                     <dl>
                     <dt>{{current.unfreeCourseUserRate}}</dt>
                      <dd>人均付费课程</dd>
                    </dl>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="price">
                    <dl>
                      <dt>{{before.activeUserCount}}</dt>
                      <dd>活跃环比</dd>
                    </dl>
                     <dl>
                      <dt>{{before.activeUserRate}}</dt>
                      <dd>活跃率环比</dd>
                    </dl>
                     <dl>
                     <dt>{{before.freeCourseUserRate}}</dt>
                      <dd>人均免费课程环比</dd>
                    </dl>
                     <dl>
                     <dt>{{before.unfreeCourseUserRate}}</dt>
                      <dd>人均付费课程环比</dd>
                    </dl>
                </div>
                </el-col>
          
        </el-row>
    </div>
</template>

<script>
import service from "@/service/index_c";
export default {
  data() {
    return {
      opeationTime: [],
      current: {},
      before: {},
      typeMenu: [
        {
          name: "昨日",
          type: 1,
          isActive: false
        },
        {
          name: "近7日",
          type: 7,
          isActive: false
        },
        {
          name: "近30日",
          type: 30,
          isActive: true
        }
      ],
      times: "",
      percentage: 0,
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      }
    };
  },
  mounted() {
    this.queryChartCostData();
  },
  methods: {
    clickChangeType(item) {
      for (let it of this.typeMenu) {
        it.isActive = false;
      }
      item.isActive = true;
      this.opeationTime = [];
      this.queryChartCostData(item.type);
    },
    priceSearch() {
      for (let it of this.typeMenu) {
        it.isActive = false;
      }
      this.queryChartCostData("");
    },
    async queryChartCostData(day = 30) {
      console.log({
        gtDate: this.opeationTime[0],
        itDate: this.opeationTime[1],
        proxyDay_biQuery: day
      });
      let res = await service.haiheiServerDataUserCost({
        gtDate: this.opeationTime[0],
        ltDate: this.opeationTime[1],
        proxyDay_biQuery: day
      });
      this.times = res.time;
      if (res.success) {
        this.before = res.result.before;
        this.current = res.result.current;
        this.percentage = (this.current.activeUserRate - 0) * 100;
      }
    }
  }
};
</script>

<style scoped>
.user-table {
  height: 150px;
}
.price {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
dl {
  text-align: center;
}
dl dt {
  font-size: 30px;
  color: #00aeff;
}
dl dd {
  margin-top: 20px;
  color: #6d727a;
  font-size: 12px;
}
</style>